<template>
 <div class="info-form">
   <div class="file-list">
     <div class="file-item" v-for="(item, index) in fileArr" :key="index">
       <div class="file-type">{{item.title}}</div>
       <div class="file-content">
         <div class="file-content-item" v-for="child in item.fileInfo" :key="child.id" @click="changeImg(item.title,child.id)">
           <img :src="isSelect? child.selectUrl : child.url" alt="">
           <div class="file-name">{{child.name}}</div>
         </div>
       </div>
     </div>
   </div>
 </div>
</template>

<script setup>
import {ref} from 'vue'
const url1 = require('../../../../assets/images/LngShippingExecution/采购.jpg')
const url11 = require('../../../../assets/images/LngShippingExecution/采购-选中.jpg')
const url2 = require('../../../../assets/images/LngShippingExecution/船务类.jpg')
const url22 = require('../../../../assets/images/LngShippingExecution/船务类-选中.jpg')
const url3 = require('../../../../assets/images/LngShippingExecution/资金结算.jpg')
const url33 = require('../../../../assets/images/LngShippingExecution/资金结算-选中.jpg')
const url4 = require('../../../../assets/images/LngShippingExecution/其他类.jpg')
const url44 = require('../../../../assets/images/LngShippingExecution/其他类-选中.jpg')
const fileArr = ref([
  {
    title: '资源采购合同',
    fileInfo: [
      {
        url: url1,
        selectUrl: url11,
        isSelect: false,
        name: '资源合同1',
        id: 556
      },
      {
        url: url1,
        selectUrl: url11,
        isSelect: false,
        name: '资源合同2',
        id: 55336
      },
      {
        url: url1,
        selectUrl: url11,
        isSelect: false,
        name: '资源合同3',
        id: 52256
      },
      {
        url: url1,
        selectUrl: url11,
        name: '资源合同4',
        id: 556332
      },
      {
        url: url1,
        selectUrl: url11,
        isSelect: false,
        name: '资源合同5',
        id: 556333
      },
      {
        url: url1,
        selectUrl: url11,
        name: '资源合同6',
        isSelect: false,
        id: 55666
      }
    ]
  },
  {
    title: '船务类',
    fileInfo: [
      {
        url: url2,
        selectUrl: url22,
        name: '船务合同1',
        isSelect: false,
        id: 534456
      },
      {
        url: url2,
        selectUrl: url22,
        name: '船务合同2',
        isSelect: false,
        id: 534444456
      },
      {
        url: url2,
        selectUrl: url22,
        name: '船务合同3',
        isSelect: false,
        id: 53445556
      },
    ]
  },
  {
    title: '资金结算类',
    fileInfo: [
      {
        url: url3,
        selectUrl: url33,
        name: '发票',
        isSelect: false,
        id: 53445556
      }
    ]
  },
  {
    title: '其他类',
    fileInfo: [
      {
        url: url4,
        selectUrl: url44,
        name: '附件',
        isSelect: false,
        id: 53445776
      },
    ]
  },
])
const changeImg = (type, id) => {
  fileArr.value.map(item => {
    if (item.title === type) {
      item.fileInfo.map(child => {
        if (child.id === id) {
          Object.assign(child, {
            isSelect: true
          })
        }
      })
    }
  })
}
</script>

<style lang="scss" scoped>
.info-form {
  margin-top: 30px;
}
.file-list {
  .file-item {

    margin-bottom: 50px;
    .file-type {
      color: #2C3749;
      font-size: 22px;
      text-align: left;
      margin-left: 23px;
    }
    .file-content {
      display: flex;
      .file-content-item {
        width: 100px;
        cursor: pointer;
        img {
          width: 60px;
          height: 78px;
        }
        .file-name {
          color: #6B7A8B;
          font-size: 12px;
        }
      }
    }
  }
}
</style>
